<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#box {
    width: 400px;
    height: 200px;
    background-color:#BFFB8F;
    border: solid 1px blue;
}


</style>
<script>
window.onload = function(){
	    var box = document.getElementById("box");
	    var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//判断浏览器类型
	    box.innerHTML =  "<h3>盒子样式</h3>"
	    box.innerHTML +=  "<br>边框：" + cssRules[0].style.border; //读取cssRules的border属性
	    box.innerHTML +=  "<br>背景：" + cssRules[0].style.backgroundColor;//读取cssRules的background-color属性	
	    box.innerHTML +=  "<br>高度：" + cssRules[0].style.height;//读取cssRules的height属性	
	    box.innerHTML +=  "<br>宽度：" + cssRules[0].style.width;//读取cssRules的width属性	
	}
</script> 
</head>
<body>
<div id="box"></div>
</body>
</html> 
